<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
          integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        body {
            background-image: url("images/login.jpg");
            backdrop-filter: blur(10px);
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            padding-top: 200px;
        }

        .login-context {
            background: rgba(255, 255, 255, .3);
            width: 500px;
            padding: 20px;
            border-radius: 10px;
        }
    </style>
    <script>
        $(function () {
            let userInfo = sessionStorage.getItem("userInfo")
            if (userInfo!=null){
                console.log("已登录");
                $(window).attr("location","index.html")
            }
            $("#login").click(function () {
                $.ajax({
                    type: 'post',
                    url: 'http://10.64.190.75:8888/user/login',
                    data: {
                        username: $("#username").val(),
                        password: $("#password").val()
                    },
                    success(data) {
                        data = JSON.parse(data)
                        if (data === "success") {
                            sessionStorage.setItem("userInfo", $("#username").val())
                            $("#show").remove()
                            $("#title").after("<div class=\"alert alert-success\" id='show' role=\"alert\">"+"登录成功"+"</div>")
                            $(window).attr("location","index.html")
                        } else{
                            $("#show").remove()
                            $("#title").after("<div class=\"alert alert-danger\" id='show' role=\"alert\">"+data+"</div>")
                        }
                    },
                    error(err) {
                        console.log(err);
                    }
                })
            })
        })
    </script>
</head>
<body>
<div class="container login-context">
    <div class="row justify-content-start m-3" id="title">
        <h2>登录</h2>
    </div>
    <form class="container">
        <div class="form-group">
            <label>用户名</label>
            <input class="form-control" id="username" required type="text">
        </div>
        <div class="form-group">
            <label>密码</label>
            <input class="form-control" id="password" required type="text">
        </div>
    </form>
    <div class="row justify-content-center">
        <button class="btn btn-success" id="login">登录</button>
    </div>
</div>
</body>
</html>